<template>
    <div>
        <h1>购物车</h1>
        <table class="table" border="1">
            <tr>
                <th>-</th>
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
            </tr>
            <tr 
                v-for="(good, index) in cartList" 
                :key="good.id" 
                :class="good.isActive ? 'active' : ''"
            >
                <td >
                    <input 
                        type="checkbox" 
                        :checked="good.isActive"
                        @change="chooice(index)"
                    />
                </td>
                <td>
                    {{good.title}}
                </td>
                <td>{{good.price}}</td>
                <td>
                    <button @click="subtract(index)" >-</button>
                    {{good.count}}
                    <button @click="add(index)">+</button>
                </td>
            </tr>
            <tr>
                <td colspan="2" >共计</td>
                <td colspan="2" >{{total}}元</td>
            </tr>
        </table>
    </div>
</template>
<script>
    export default {
        name: 'cart', 
        data() {
            let cartList = []
            try {
                cartList = JSON.parse(window.localStorage['cartList'])
            } catch (error) {
                console.log(error);
                window.localStorage['cartList'] = '[]'
            }
            return {
                cartList: cartList
            }
        },
        methods: {
            chooice: function(i) {
                this.cartList[i].isActive = !this.cartList[i].isActive
            },
            subtract(i) {
                if(this.cartList[i].count > 1) {
                    this.cartList[i].count--
                } else if (window.confirm('是否要删除这个商品')) {
                    this.cartList.splice(i, 1);
                }
            },
            add(i) {
                this.cartList[i].count ++
            }
        },
        watch: {
            cartList: {
                handler: function(val) {
                    window.localStorage['cartList'] = JSON.stringify(val)
                },
                deep: true
            }
        },
        created() {
            this.$root.$on('addCart', good => {
                const exist = this.cartList.filter(v => v.id === good.id).length === 0
                if (exist) {
                    this.cartList.push({
                        ...good,
                        count: 1,
                        isActive: true
                    })
                } else {
                    for (const goodItem of this.cartList) {
                        if (goodItem.id === good.id) {
                            goodItem.count++
                            break;
                        }
                    }
                }
            })
        },
        computed: {
            total: function() {
                return this.cartList.reduce((res, good) => {
                    if (good.isActive) {
                        res += good.count * good.price
                    }
                    return res
                }, 0)
            }
        }
    }
</script>

<style lang="css" scoped>
.table{
    width: 400px;
    margin: 0 auto;
}
.active{
    background-color: green;
    color: #fff;
}
</style>